<template>
	<view class="Ok">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
			<u-form-item label="身份证" prop="userInfo.Id" borderBottom ref="item1">
				<image class="Id" src="../../static/403ae1954baaa360b1c7bc107dfca8c_03.jpg" @click="choseFile" />
			</u-form-item>
			<u-form-item label="用户姓名" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="识别身份证后自动带入"></u--input>
			</u-form-item>
			<u-form-item label="身份证号" prop="userInfo.Idcard" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.Idcard" border="none" placeholder="识别身份证后自动带入"></u--input>
			</u-form-item>
			<u-form-item label="用户地址" prop="userInfo.Useraddress" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.Useraddress" border="none" placeholder="识别身份证后自动带入"></u--input>
			</u-form-item>
		</u--form>
		<view class="btn">
			<u-button color="#fe8739" @click="goblack">提交</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						Id: "",
						name: "",
						Idcard: "",
						Useraddress: "",
					},
				},
				radio: '',
				switchVal: false,
				access_token: "",
				rules:{},
			};
		},
		created() {
			this.getAccessToken()
		},
		methods: {
			getAccessToken() {
				let client_id = 'pc28D1aTGsbFGBlcxGB9qTNy';
				let client_secret = 'zL1UlQiBMkd9KRujXd8xGLWuBthUPlAo';
				uni.request({
					url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${client_id}&client_secret=${client_secret}&`,
					method: 'get',
					success: (result) => {
						this.access_token = result.data.access_token
					}
				})
			},
			getMis(filebase64) {
				uni.request({
					url: `https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=${this.access_token}`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						image: filebase64,
						id_card_side: 'front'
					},
					success: (resu) => {
						this.model1.userInfo = {
							Id: "",
							name: resu.data.words_result['姓名'].words,
							Idcard: resu.data.words_result['公民身份号码'].words,
							Useraddress: resu.data.words_result['住址'].words,
						}
						uni.hideLoading();
						this.$forceUpdate();
					}
				})
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			choseFile() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.showLoading({
							title: '正在识别中...'
						});
						// 下面进行转码
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: (res) => { //成功回调页面
								this.getMis(res.data)
							}
						});
					}
				})
			},
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.form1.setRules(this.rules)
			},
			goblack(){
				//打印数据
				let cardshuju=this.model1.userInfo
				let arr=JSON.stringify(cardshuju)
				let card=encodeURIComponent(arr)
				//返回上一个页面
				uni.navigateTo({
					url:"/pages/Add a list/Add a list?card="+card
				})
			}
		}
	};
</script>
<style>
	.Id {
		width: 250rpx;
		height: 200rpx;
		margin-left: 20rpx;
	}

	.Ok {
		padding: 40rpx;
	}

	.u-form-item__body__left {}

	.u-form-item__body__left {
		width: 100px !important;
		margin-left: 20rpx;
		font-weight: 900;
	}

	.u-input__content__field-wrapper input {
		text-align: right !important;
		margin-right: 10rpx;
		font-size: 23rpx !important;
		position: relative;
	}

	.btn {
		margin: 20px;
	}
</style>